<template lang="">
  <div>
        <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="key" clearable @clear="onClearSearch">
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"  @click="searchUser">搜索用户</el-button>
        </el-col>
        <el-col :span='16'>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="创建时间" name="first"></el-tab-pane>
            <el-tab-pane label="用户id排序" name="second"></el-tab-pane>
            <el-tab-pane label="用户名称排序" name="third"></el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-table :data="users">

        <el-table-column label="头像">
          <template slot-scope="scope">
            <div class="avatar-title-wrap">
              <img
                class="avatar"
                round
                fit="cover"
                :src="scope.row.baseUrl+scope.row.photo"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userid" label="id" width="140" >
        </el-table-column>
        <el-table-column prop="name" label="名称" width="120" >
        </el-table-column>
        <el-table-column  label="作品">
          <template slot-scope="scope">{{scope.row.myvideos.length}}</template>
        </el-table-column>
        <el-table-column  label="喜欢">
          <template slot-scope="scope">{{scope.row.likevideos.length}}</template>
        </el-table-column>
        <el-table-column  label="关注">
          <template slot-scope="scope">{{scope.row.follow.length}}</template>
        </el-table-column>
        <el-table-column  label="粉丝">
          <template slot-scope="scope">{{scope.row.fans.length}}</template>
        </el-table-column>
        <el-table-column  label="创建时间">
          <template slot-scope="scope">{{new Date(parseInt(scope.row._id.toString().substring(0, 8), 16) * 1000) | dateFormat}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <div slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="showEditDialog(scope.row.userid)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="removeUserById(scope.row.userid)"
            ></el-button>
          </div>
        </el-table-column>

      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog
      title="修改用户信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogVisible = false"
    ></el-dialog>
  </div>
</template>
<script>
import { getUserList, getUserSearch, removeUser, rankByUserId, rankByName } from '@/api/base.js'
export default {
  name: 'User',
  data () {
    return {
      users: [],
      total: 0,
      currentPage: 1,
      pageSize: 6,
      key: '',
      editDialogVisible: false,
      activeName: 'first'
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      if (this.key !== '') {
        const { data: res } = await getUserSearch(this.key, this.currentPage)
        this.users = res.data
        console.log(res)
        this.total = res.meta.msg
      } else {
        var res
        if (this.activeName === 'first') {
          res = await getUserList(this.currentPage)
          console.log(11)
        } else if (this.activeName === 'second') {
          console.log(22)
          res = await rankByUserId(this.currentPage)
        } else {
          console.log(33)
          res = await rankByName(this.currentPage)
        }
        this.users = res.data.data
        this.total = res.data.meta.msg
      }
    },
    searchUser () {
      this.currentPage = 1
      this.getUserList()
    },
    handleSizeChange (index) {
    },
    handleCurrentChange (index) {
      this.currentPage = index
      this.getUserList()
    },
    onClearSearch () {
      this.key = ''
      this.currentPage = 1
      this.getUserList()
    },
    async showEditDialog (id) {
      // const { data: res } = await this.$http.get('users/' + id)
      // if (res.meta.status !== 200) {
      //   return this.$message.error('查询用户信息失败！')
      // }
      // this.editUserForm = res.data
      this.editDialogVisible = true
    },
    async removeUserById (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await removeUser({ userid: id })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('您没有权限删除！')
      this.$message.success('删除用户成功！')
      this.getUserList()
    },
    handleClick (tab, event) {
      console.log(this.activeName)
      this.currentPage = 1
      this.getUserList()
    }
  }
}
</script>
<style lang="less" scoped>
.avatar-title-wrap {
  display: flex;
  align-items: center;
  .avatar {
    width: 40px;
    height: 40px;
    padding: 2px;
    background: #fff;
  }
}
.el-breadcrumb {
  margin-bottom: 15px;
}
</style>
